<template>
  <div v-if="show">
    <el-dialog :visible.sync="dialogVisible" fullscreen append-to-body>
      <el-container>
        <el-main style="height:calc(100vh  - 160px); padding: 0 45px;">
          <div>
            <div>
              <div style="font-size: 22px;font-weight: bold;text-align: center;line-height: 2;">{{ cepingHdglb.hdName }}
                匿名二维码
              </div>
            </div>
            <div>
              <el-checkbox v-model="jgChecked">打印票面机构</el-checkbox>
            </div>
            <div v-for="(cpp,i) in cppList" :key="i" v-if="cepingHdglb.hdSflhcp==0">
              <div style="color:#303745" v-if="cppList.length>1">{{ i + 1 }}、{{ cpp.cppName }}</div>
              <div v-for="(gz,j) in cpp.xpgzList" :key="j" style="margin:20px;">
                <div>{{ gz.cpCode }}票</div>
                <div v-if="getList(cpp.cppId,gz.id).length==0" style="margin: 10px;">无匿名票</div>
                <div style="display: flex; flex-wrap: wrap; ">
                  <div v-for="(xp,k) in getList(cpp.cppId,gz.id)" style="padding:15px;margin:10px; display: flex;flex-direction: column; justify-content: center;align-items: center; background:#f4f4fc;border-radius: 8px;position:relative;">
                    <div style="position:absolute; background:#fff;width:16px;height:16px;left:-8px;border-left:0;border-radius:50%;top:170px"></div>
                    <div style="position:absolute; background:#fff;width:16px;height:16px;right:-8px;border-left:0;border-radius:50%;top:170px"></div>
                    <div><img :src="'/ceping/anonymous/cepinghdglxpxxb/rqCode/'+xp.xpCode" style="width: 160px;height: 160px;" /></div>
                    <div style="color:#303745">{{ xp.xpCode }}</div>
                    <!-- <div v-show="jgChecked">{{ xp.cpDeptName }}</div> -->
                    <div v-show="jgChecked">{{ getDeptName(xp)}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div v-for="(cpp,i) in cppList" :key="i" v-if="cepingHdglb.hdSflhcp==1&&cpp.lhcpBj==1">
              <div v-for="(gz,j) in cpp.xpgzList" :key="j" style="margin:20px;">
                <div>{{ gz.cpCode }}票</div>
                <div v-if="getListGz(gz.id).length==0" style="margin: 10px;">无匿名票</div>
                <div style="display: flex; flex-wrap: wrap; ">
                  <div v-for="(xp,k) in getListGz(gz.id)" style="padding:15px;margin:10px; display: flex;flex-direction: column; justify-content: center;align-items: center; background:#f4f4fc;border-radius: 8px;position:relative;">
                    <div style="position:absolute; background:#fff;width:16px;height:16px;left:-8px;border-left:0;border-radius:50%;top:170px"></div>
                    <div style="position:absolute; background:#fff;width:16px;height:16px;right:-8px;border-left:0;border-radius:50%;top:170px"></div>
                    <div><img :src="'/ceping/anonymous/cepinghdglxpxxb/rqCode/'+xp.xpCode" style="width: 160px;height: 160px;" /></div>
                    <div style="color:#303745">{{ xp.xpCode }}</div>
                    <!-- <div v-show="jgChecked">{{ xp.cpDeptName }}</div> -->
                    <div v-show="jgChecked">{{ getDeptName(xp) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div ref="printRqCode" class="printRqCode" style="display: none">
            <!-- 一行四个 -->
            <div style="width:100%" v-if="qrList.length>0" v-show="jgChecked === false ">
              <template v-for="i in getQrList(16)">
                <div style="display: flex; flex-wrap: wrap;width:100%">
                  <div v-for="j in 16" v-if="qrList.length>=((i-1)*16 + (j-1)+1)" style="margin: 0px 8px;">
                    <div style="width:100%;padding:10px 5px;margin:13px 1%; border:1px solid #303745; background:#f4f4fc;border-radius: 8px;page-break-inside: avoid; box-sizing: border-box;">
                      <div style="font-size:24px; color:#b62029;height:32px;line-height:32px;padding:0px 10px; width:100%">
                        {{ qrList[(i - 1) * 16 + (j - 1)].cpCode }}票
                      </div>
                      <div style="width: 145px;height: 145px;margin:0 auto"><img :src="'/ceping/anonymous/cepinghdglxpxxb/rqCode/'+qrList[(i-1)*16 + (j-1)].xpCode" style="width: 145px;height: 145px;" /></div>
                      <div style="color:#303745;font-size:20px;text-align:center;height:32px;line-height:32px">
                        {{ qrList[(i - 1) * 16 + (j - 1)].xpCode }}
                      </div>
                    </div>
                  </div>
                </div>
                <div style="page-break-after: always;"></div>
              </template>
            </div>
            <!-- 一行两个 -->
            <div style="width:100%" v-if="qrList.length>0" v-show="jgChecked">
              <template v-for="i in getQrList(12)">
                <div style="display: flex; justify-content: space-between;flex-wrap: wrap;width:100%">
                  <div v-for="j in 12" v-if="qrList.length>=((i-1)*12 + (j-1)+1)" style="margin: 0px 1%; width:48%">
                    <div style="width:100%;padding:5px;margin:8px 1%; border:1px solid #303745; background:#f4f4fc;border-radius: 8px;page-break-inside: avoid; box-sizing: border-box;">
                      <div style="display: flex;justify-content: space-between;">
                        <div style="width: 145px;height: 145px;margin-right:5px;flex-shrink: 0;"><img :src="'/ceping/anonymous/cepinghdglxpxxb/rqCode/'+qrList[(i-1)*12 + (j-1)].xpCode" style="width: 145px;height: 145px;" /></div>
                        <div style="width:100%;display: flex;flex-direction: column;justify-content: space-between;">
                          <div>
                            <div style="color:#303745;font-size:24px;height:32px;line-height:32px;margin-bottom:10px">
                              {{ qrList[(i - 1) * 12 + (j - 1)].xpCode }}
                            </div>
                            <!-- <div style="color:#646b80">{{  qrList[(i - 1) * 12 + (j - 1)].cpDeptName }}</div> -->
                            <div style="color:#646b80">{{  getShortDeptName(qrList[(i - 1) * 12 + (j - 1)]) }}</div>
                            <div style="color:#646b80">{{  qrList[(i - 1) * 12 + (j - 1)].cpDeptName }}</div>
                          </div>
                          <div style="font-size:24px; color:#b62029;height:32px;line-height:32px;padding:0px 10px;text-align: right;">
                            {{ qrList[(i - 1) * 12 + (j - 1)].cpCode }}票
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="page-break-after: always;"></div>
              </template>
            </div>
          </div>
        </el-main>
      </el-container>
      <span slot="footer" class="dialog-footer">
        
        <el-button type="primary" @click="print">打印</el-button>
        <el-button type="primary" plain @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { huoDongNMP } from '@/api/ceping/cepinghdglxpxxb'

export default {
  name: "qrcode",
  data() {
    return {
      show: false,
      dialogVisible: false,
      cepingHdglb: {},
      cppList: [],
      cepingHdglXpxxbGroup: [],
      qrList: [],
      jgChecked: true,

    }
  },
  methods: {
    getDeptName(xp){
      var result = xp.fullDeptName ? xp.fullDeptName : xp.cpDeptName;
      if(!result.includes("机关"))
        result = result.replace("共享运营公司","")
      return  result;
    },
    getShortDeptName(xp){
      var result = xp.fullDeptName ? xp.fullDeptName : xp.cpDeptName;
      result = result.replace(xp.cpDeptName,'');
      if(!result.includes("机关"))
        result = result.replace("共享运营公司","")
      return  result;
    },

    init(hdId) {
      huoDongNMP(hdId).then(res => {

        //console.log(res.data.data);
        this.cepingHdglb = res.data.data.cepingHdglb;

        let cppList = res.data.data.cepingHdglCppmxbList;

        let cpgzCpmxb = {}

        for (var i in cppList) {
          if(cppList[i].cpgzCpmxb != ''){
            cppList[i].xpgzList = JSON.parse(cppList[i].cpgzCpmxb);
            if(cppList[i].lhcpBj==1){
              cpgzCpmxb = JSON.parse(cppList[i].cpgzCpmxb);
            }
          }
        }
        if(this.cepingHdglb.hdSflhcp==1){
          for (var i in cppList) {
            cppList[i].xpgzList = cpgzCpmxb;
          }
        }
        this.cppList = cppList;
        this.cepingHdglXpxxbGroup = res.data.data.cepingHdglXpxxbGroup
        //console.log(this.cepingHdglXpxxbGroup);

        this.qrList = [];

        for (var i in this.cppList) {
          let cpp = this.cppList[i]
          for (var j in cpp.xpgzList) {
            let gz = cpp.xpgzList[j]
            var x = this.getList(cpp.cppId, gz.id);
            for (var k in x) {
              x[k].cpCode = gz.cpCode;
              this.qrList.push(x[k]);
            }
          }
        }

        ////console.log(this.qrList)

        this.show = true;
        this.dialogVisible = true;

      })
    },
    getQrList(x) {
      return this.qrList.length % x == 0 ? (this.qrList.length / x) : (parseInt(this.qrList.length / x) + 1);
    },
    getList(cppId, cpmxId) {
      var data = [];
      for (var i in this.cepingHdglXpxxbGroup) {
        if (this.cepingHdglXpxxbGroup[i].cppId == cppId && this.cepingHdglXpxxbGroup[i].cpmxId == cpmxId) {
          data.push(this.cepingHdglXpxxbGroup[i]);
        }
      }
      return data;
    },
    getListGz(cpmxId) {
      var data = [];
      for (var i in this.cepingHdglXpxxbGroup) {
        if (this.cepingHdglXpxxbGroup[i].cpmxId == cpmxId) {
          data.push(this.cepingHdglXpxxbGroup[i]);
        }
      }
      return data;
    },
    print() {
      setTimeout(() => {
        var iframe = document.createElement("iframe");
        iframe.setAttribute(
          "style",
          "position:absolute;width:0px;height:0px;left:-500px;top:-500px;"
        );
        document.body.appendChild(iframe);
        var doc = iframe.contentWindow.document;
        doc.write(this.$refs.printRqCode.innerHTML);
        doc.close();
        iframe.onload = function () {
          iframe.contentWindow.focus();
          iframe.contentWindow.print();
          document.body.removeChild(iframe);
        };
      }, 2000);

    }
  }
}
</script>

<style>
</style>
